<script setup lang="ts">
import { onMounted, ref, watch, type Ref, reactive, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'

import * as echarts from 'echarts/core';
import {
    TooltipComponent,
    type TooltipComponentOption,
    LegendComponent,
    type LegendComponentOption
} from 'echarts/components';
import { PieChart, type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

const router = useRouter()

interface deviceData {
    id: number;
    type: string;
    status: string;
    time: string;
}

interface mainData {
    value: deviceData[]
}

/**
 * 数据分页显示的功能
 */
//#region 
let arr: deviceData[] = [
    { id: 24150721, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150723, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '电脑', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150726, type: '热水器', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150727, type: '空调', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '电脑', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150731, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150727, type: '空调', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150741, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '电视', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150723, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150727, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150751, type: '空调', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150722, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '空调', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150726, type: '热水器', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150727, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150720, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150761, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150723, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150727, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150771, type: '热水器', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150727, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150728, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '电视', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150781, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '电脑', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150727, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150728, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150791, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150727, type: '电脑', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150722, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150720, type: '热水器', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150701, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '插座', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150724, type: '空调', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150725, type: '电脑', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150726, type: '电视', status: '报警', time: '2023-12-20 14:46' },
    { id: 24150727, type: '电脑', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150728, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150729, type: '空调', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150720, type: '电灯', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150711, type: '电视', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150722, type: '插座', status: '正常', time: '2023-12-20 14:46' },
    { id: 24150723, type: '空调', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150724, type: '电脑', status: '预警', time: '2023-12-20 14:46' },
    { id: 24150725, type: '电脑', status: '失联', time: '2023-12-20 14:46' },
    { id: 24150726, type: '热水器', status: '失联', time: '2023-12-20 14:46' },
]// 原始数据
let filterArr: deviceData[] = JSON.parse(JSON.stringify(arr)) // 过滤后的数据,初始时先深拷贝原始数据
let limitArr: mainData = reactive({
    value: filterArr // 分页后的数据
});
let dataLen: Ref<number> = ref(filterArr.length);
let currentPage: Ref<number> = ref(1); // 当前页码

/**
 * 换页功能，进行数组的数据截取
 */
function turnPage() {
    let startIndex = (currentPage.value - 1) * 10;
    let endIndex = startIndex + 10;
    if (endIndex > dataLen.value) {
        endIndex = dataLen.value + 1;
    }
    limitArr.value = filterArr.slice(startIndex, endIndex);
    colorStatus();
}

let deviceArr: HTMLDivElement[] = []; // 获取所有的div
/**
 * 根据设备状态更改样式的函数
 */
function colorStatus() {
    nextTick(() => {
        for (let i = 0; i < limitArr.value.length; i++) {
            if (limitArr.value[i].status == '正常') {
                deviceArr[i].style.borderRight = '10px solid var(--common-color)'
            } else if (limitArr.value[i].status == '预警') {
                deviceArr[i].style.borderRight = '10px solid var(--warn-color)'
            } else if (limitArr.value[i].status == '报警') {
                deviceArr[i].style.borderRight = '10px solid var(--danger-color)'
            } else {
                deviceArr[i].style.borderRight = '10px solid var(--miss-color)'
            }
        }
    })
}

/** 
 * 监听当前页码，当页码变化时触发换页函数
 * 起始时立即触发一次换页函数，就不需要再mouted里触发
 */
watch(currentPage, () => {
    turnPage()
}, { immediate: true })
//#endregion

/**
 * 数据过滤功能
 * 根据用户输入的参数进行数据过滤
 */
//#region
let searchID: string = ''; //获取用户输入的查询ID
let searchType: string = '全部'; //获取用户输入的查询类别
let searchStatus: string = '全部'; // 获取用户输入的查询状态
/**
 * 根据输入的类别、状态以及ID过滤数据列表
 */
function filterByParams() {
    let catchParamsArr: deviceData[] = [];
    if (searchType == '全部' && searchStatus == '全部') {
        catchParamsArr = JSON.parse(JSON.stringify(arr));
    } else if (searchStatus == '全部') {
        arr.forEach((item) => {
            if (item.type == searchType) {
                catchParamsArr.push(item)
            }
        })
    } else if (searchType == '全部') {
        arr.forEach((item) => {
            if (item.status == searchStatus) {
                catchParamsArr.push(item)
            }
        })
    } else {
        arr.forEach((item) => {
            if (item.type == searchType && item.status == searchStatus) {
                catchParamsArr.push(item)
            }
        })
    }
    let catchIDArr: deviceData[] = [];
    let searchParams = searchID.trim();
    if (searchParams !== '') {
        catchParamsArr.forEach((item) => {
            if (item.id.toString() == searchParams) {
                catchIDArr.push(item)
            }
        })
    } else {
        catchIDArr = catchParamsArr
    }
    filterArr = catchIDArr;
    limitArr.value = filterArr;
    dataLen.value = filterArr.length
    if (dataLen.value > 10) {
        turnPage()
    } else {
        colorStatus()
    }
}

/**
 * 重置所有输入的参数
 */
function refresh() {
    searchID = '';
    searchType = '全部';
    searchStatus = '全部';
    filterArr = JSON.parse(JSON.stringify(arr));
    limitArr.value = filterArr;
    dataLen.value = filterArr.length
    if (dataLen.value > 10) {
        turnPage()
    } else {
        colorStatus()
    }
}
//#endregion

/**
 * 展示设备状态统计的功能
 */
//#region 
/**
 * echars统计图表
 */
type EChartsOption = echarts.ComposeOption<
    TooltipComponentOption | LegendComponentOption | PieSeriesOption
>;

/**
 * 绘制展示设备状态类型统计图表的函数
 */
function drawStatistic() {
    let commonCount = 0;
    let warnCount = 0;
    let dangerCount = 0;
    let missCount = 0;
    arr.forEach(item => {
        if (item.status == '预警') {
            warnCount++;
        } else if (item.status == '报警') {
            dangerCount++;
        } else if (item.status == '失联') {
            missCount++;
        } else {
            commonCount++
        }
    });
    var chartDom = document.getElementById('statisticStatus');
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        textStyle: {
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                color: ['#0be775', '#E6A23C', '#F56C6C', '#73767a'],
                data: [
                    { value: commonCount, name: '正常' },
                    { value: warnCount, name: '预警' },
                    { value: dangerCount, name: '报警' },
                    { value: missCount, name: '失联' }
                ],
                top: 20
            }
        ]
    };

    option && myChart.setOption(option);
}

let isShowStatistic: boolean = false; // 是否显示图表
let isDrawed: boolean = false; // 图表是否已经绘制过
/**
 * 收起或显示展示设备状态类型统计图表的函数
 */
function showStatistic() {
    isShowStatistic = !isShowStatistic;
    var chartDom = document.getElementById('statisticStatus');
    if (chartDom) {
        if (isShowStatistic) {
            if (!isDrawed) { // 只绘制一次图表
                drawStatistic();
                isDrawed = true;
            }
            chartDom.style.display = 'block';
        } else {
            chartDom.style.display = 'none';
        }
    }
}


//#endregion

/**
 * 跳转路由
 */

/**
 * 跳转至设备历史数据的函数
 */
function gotoHistorical(id: number) {
    router.push({ name: 'HistoricalData', params: { deviceID: `${id}` } })
}
</script>

<template>
    <div class="deviceContainer">
        <div class="filter">
            <div class="filterID">
                查询ID：<input type="text" placeholder="请输入要查询的设备ID" class="filterIDInput" v-model="searchID">
            </div>
            <div class="filterType">
                过滤条件：
                <label for="selectType">电器类型</label>
                <select name="selectType" id="selectType" class="selectInput" v-model="searchType">
                    <option value="全部">全部</option>
                    <option value="空调">空调</option>
                    <option value="插座">插座</option>
                    <option value="电脑">电脑</option>
                    <option value="电灯">电灯</option>
                    <option value="电视">电视</option>
                    <option value="热水器">热水器</option>
                </select>
                <label for="selectStatus" class="statusLable">设备状态</label>
                <select name="selectStatus" id="selectStatus" class="selectInput" v-model="searchStatus">
                    <option value="全部">全部</option>
                    <option value="正常">正常</option>
                    <option value="预警">预警</option>
                    <option value="报警">报警</option>
                    <option value="失联">失联</option>
                </select>
            </div>
            <div class="button">
                <button class="buttonStyle" @click="filterByParams">查询</button>
                <button class="buttonStyle" @click="refresh">恢复</button>
            </div>
            <button class="statistic" @click.passive="showStatistic">
                设备状态类型统计
            </button>
        </div>
        <div class="deviceInfo" v-for="item in limitArr.value" ref="deviceArr">
            <div class="devieceID">
                <img src="@/assets/images/device.png" alt="">
                设备ID：{{ item.id }}
            </div>
            <div class="deviceType">
                <img src="@/assets/images/type.png" alt="">
                电器类型：{{ item.type }}
            </div>
            <div class="deviceStatus">
                <img src="@/assets/images/deviceStatus.png" alt="">
                设备状态：{{ item.status }}
            </div>
            <div class="lastReportTime">
                <img src="@/assets/images/time.png" alt="">
                最后上报时间：{{ item.time }}
            </div>
            <div class="link">
                <span @click="gotoHistorical(item.id)">历史数据</span>
                <span>维修记录</span>
            </div>
        </div>
        <div class="pageLimit">
            <el-pagination background layout="prev, pager, next" :total="dataLen" hide-on-single-page
                v-model:current-page="currentPage" />
        </div>
        <div id="statisticStatus"></div>
    </div>
</template>

<style scoped>
.deviceContainer {
    position: relative;
}

.filter {
    display: flex;
    width: 100%;
    height: 50px;
    margin: 15px auto;
    font-size: 18px;
    line-height: 50px;
}

.filter div {
    margin-left: 80px;
}

.filterIDInput {
    height: 30px;
    width: 200px;
    padding-left: 10px;
    background-color: transparent;
    border: none;
    vertical-align: baseline;
    color: #fff;
    font-size: 18px;
}

.statusLable {
    margin-left: 10px;
}

.selectInput {
    margin-left: 5px;
    height: 30px;
    width: 80px;
    border-radius: 10px;
    font-size: 16px;
}

.buttonStyle {
    height: 40px;
    width: 80px;
    background-color: #089cff;
    border: 1px solid #a0cfff;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
}

.buttonStyle:last-child {
    margin-left: 5px;
}

.statistic {
    width: 150px;
    height: 30px;
    margin-left: 80px;
    margin-top: 10px;
    background-color: transparent;
    color: #fff;
    border: 1px solid whitesmoke;
    border-radius: 5px;
}

.deviceInfo {
    display: flex;
    width: 98%;
    height: 60px;
    margin: 15px auto;
    border-top: 1px solid whitesmoke;
    border-bottom: 1px solid whitesmoke;
    border-right: 10px solid var(--common-color);
    line-height: 60px;
    font-size: 20px;
    /* letter-spacing: 1px; */
}

.deviceInfo div {
    margin-left: 50px;
}

.deviceInfo div img {
    width: 24px;
    vertical-align: text-bottom;
}

.deviceType {
    width: 200px;
}

.link {
    font-size: 14px;
    text-decoration: underline;
}

.link span {
    margin-left: 10px;
}

.link span:hover {
    color: #a0cfff;
    cursor: pointer;
}

.pageLimit {
    position: absolute;
    top: 820px;
    left: 0;
}

/* 更改分页器样式 */
:deep(.el-pagination) {
    margin-left: 550px;
    --el-pagination-font-size: 18px;
    --el-pagination-button-bg-color: transparent;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #687cb8;
}

:deep(.el-pager li) {
    color: white;
}

:deep(.pagination.is-background .btn-prev:disabled) {

    background-color: transparent;
}

:deep(.el-pagination button) {
    color: white;
}

#statisticStatus {
    position: absolute;
    display: none;
    width: 400px;
    height: 300px;
    background-color: #1c3062;
    border: 1px solid #fff;
    border-radius: 10px;
    top: 60px;
    left: 800px;
}


</style>